<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>Wedding Bliss - a Unique HTML Template For Your Wedding Celebration</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimum-scale=1">

        <!-- INCLUDE BOOTSTRAP CSS -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">

        <!-- INCLUDE AUTHOR CSS -->
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">

        <!-- INCLUDE animate CSS -->
        <link rel="stylesheet" href="css/animate.min.css">

        <!-- THE FANYCYBOX CSS -->
        <link rel="stylesheet" href="megafolio/fancybox/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />

        <!-- INCLUDE GOOGLE FONTS -->
        <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Cinzel:400,700|Great+Vibes' rel='stylesheet' type='text/css'>        

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>

    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
    
    <!-- =========================================================================================================
    ==============================================================================================================
                                                The Header Area With The Menu
    ==============================================================================================================
    ============================================================================================================== -->  

    <header class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <div class="names"> Sharon &#38; Michael</div><!-- /.names -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <nav class="navbar-collapse collapse">
                <ul class="nav navbar-nav left-nav">
                    <li class="active"><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">Home <b class="caret"></b></a>
                        <ul class="dropdown-menu">

                            <li><a href="index.html#thetop">Home</a></li>
                            <li class="divider"></li>
                            <li><a href="uielements.html">UI Elements</a></li>
                            <li class="divider"></li>
                            <li><a href="leftcolumn.html">Left Column Page</a></li>
                            <li class="divider"></li>
                            <li><a href="rightcolumn.html">Right Column Page</a></li>
                            
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">The Wedding <b class="caret"></b></a>
                        <ul class="dropdown-menu">

                            <li><a href="index.html#ourstory">Our Story</a></li>
                            <li class="divider"></li>
                            <li><a href="index.html#thebrideside">Bride's Party</a></li>
                            <li class="divider"></li>
                            <li><a href="index.html#thegroomside">Groom's Party</a></li>
                            <li class="divider"></li>
                            <li><a href="index.html#weddinglocation">Wedding Location</a></li>
                            
                        </ul>
                    </li>
                    <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">Blog <b class="caret"></b></a>
                        <ul class="dropdown-menu">

                            <li><a href="index.html#blog1">Blog Style 1</a></li>
                            <li class="divider"></li>
                            <li><a href="index.html#blog2">Blog Style 2</a></li>

                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">Gallery <b class="caret"></b></a>
                        <ul class="dropdown-menu">

                            <li><a href="index.html#gallery1">Gallery Style 1</a></li>
                            <li class="divider"></li>
                            <li><a href="index.html#gallery2">Gallery Style 2</a></li>
                            
                        </ul>
                    </li>
                </ul>
                 <a class="navbar-brand" href="#">25 July, 2014</a>

                <ul class="nav navbar-nav right-nav">
                    <li><a href="index.html#registry">Registry</a></li>
                    <li><a href="index.html#guestbook">Guest Book</a></li>
                    <li><a href="index.html#rsvp">Events / RSVP</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#myModal">Contact</a></li>
                </ul>
            </nav><!--/.navbar-collapse -->

        </div><!-- /.container-->
    </header>


    <!-- =========================================================================================================
    ==============================================================================================================
                                                    the single page with right column
    ==============================================================================================================
    ============================================================================================================== -->
    <section id="single-rightcolumn">
        <div id="single-rightcolumnphoto" class="parallax-hook parallax-rightcolumn parallax-background">
                
            <div class="section-overlay">
                <div class="container">
                    <div class="row">
                        <header class="col-md-6 col-md-offset-3">
                            Single Page With a Right Column
                        </header>
                    </div><!-- /.row -->
                </div><!-- /.container -->
            </div><!-- /.section-overlay -->
            
        </div><!-- /#rightcolumnphoto -->
    
        <div class="container">
                
            <div class="row">


                <!-- =========================================================================================================
                                                                the left column - the sidebar
                ============================================================================================================== -->
                <aside class="right-column col-md-4">
                    <ul>
                        <li class="widget">
                            <div class="textwidget">
                                <h4 class="widgettitle">The Day is Almost Here!</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
                                <a class="btn btn-primary btn-lg" href="index.html#rsvp">Please RSVP Now</a>
                            </div><!-- /.textwidget-->
                        </li>

                        <li class="widget">
                            <div class="search-box">
                                <h4 class="widgettitle">Search:</h4>
                                <p>Please use the form below to search our website for whatever you find interesting</p>
                                <div class="form-group">
                                    <input type="text" placeholder="Search Term..." name="searchform" id="searchform" class="form-control">
                                    <input type="submit" value="" id="search" class="searchbtn">
                                </div>
                            </div><!-- /.search-box-->
                        </li>

                        <li class="widget">
                            <div class="flickr-box">
                                <h4 class="widgettitle">Flickr Widget:</h4>
                                <p>Here are some photos of us lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                                <ul class="photos">
                                    <li>
                                        <a title="Swinging Chairs In The Sunset" rel="group" class="fancybox" href="img/bloggallery1/img-1.jpg"><img src="img/bloggallery1/thumbnails/img-1-thumb.jpg" alt="sunset"></a>
                                    </li>
                                    <li>
                                        <a title="A little Cottage We Found" rel="group" class="fancybox" href="img/bloggallery1/img-2.jpg"><img src="img/bloggallery1/thumbnails/img-2-thumb.jpg" alt="cottage"></a>
                                    </li>
                                    <li>
                                        <a title="Seaside is So Relaxing!" rel="group" class="fancybox" href="img/bloggallery1/img-3.jpg"><img src="img/bloggallery1/thumbnails/img-3-thumb.jpg" alt="seaside"></a>
                                    </li>
                                    <li>
                                        <a title="Our Old Car" rel="group" class="fancybox" href="img/bloggallery1/img-4.jpg"><img src="img/bloggallery1/thumbnails/img-4-thumb.jpg" alt="old car"></a>
                                    </li>
                                    <li>
                                        <a title="Swinging Chairs In The Sunset" rel="group" class="fancybox" href="img/bloggallery1/img-1.jpg"><img src="img/bloggallery1/thumbnails/img-1-thumb.jpg" alt="chairs"></a>
                                    </li>
                                    <li>
                                        <a title="A little Cottage We Found" rel="group" class="fancybox" href="img/bloggallery1/img-2.jpg"><img src="img/bloggallery1/thumbnails/img-2-thumb.jpg" alt="cottage"></a>
                                    </li>
                                </ul>
                            </div><!-- /.search-box-->
                        </li>

                        <li class="widget">
                            <div class="latest-posts">
                                <h4 class="widgettitle">Our Latest Posts</h4>
                                <ul>
                                    <li>Lorem ipsum dolor sit amet</li>
                                    <li>Consectetur adipisicing </li>
                                    <li>Elit, sed do eiusmod tempor i</li>
                                    <li>ut labore et dolore magna aliqua. </li>
                                    <li>Ut enim ad minim veniam</li>
                                    <li>Quis nostrud exercitation ullamco</li>
                                    <li>Llaboris nisi ut aliquip ex ea comm</li>
                                </ul>
                            </div><!-- /.latest-posts-->
                        </li>

                        <li class="widget">
                            <div class="recent-comments">
                                <h4 class="widgettitle">Recent Comments</h4>
                                <ul>
                                    <!-- comment no. 1 -->
                                    <li>
                                        <img src="img/guestbook-guest.png" class="alignleft" alt="comment">
                                        <div class="alignright">
                                            <h5>John Doe</h5>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit [...]</p>
                                        </div>
                                    </li>

                                    <!-- comment no. 2 -->
                                    <li>
                                        <img src="img/guestbook-guest.png" class="alignleft" alt="comment">
                                        <div class="alignright">
                                            <h5>John Doe</h5>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit [...]</p>
                                        </div>
                                    </li>

                                    <!-- comment no. 3 -->
                                    <li>
                                        <img src="img/guestbook-guest.png" class="alignleft" alt="comment">
                                        <div class="alignright">
                                            <h5>John Doe</h5>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit [...]</p>
                                        </div>
                                    </li>
                                </ul>
                            </div><!-- /.latest-posts-->
                        </li>


                    </ul>
                </aside><!-- /.left-column-->



                <!-- =========================================================================================================
                                                                the left column - the content
                ============================================================================================================== -->

                <div class="post-content col-md-8">
                    <img src="img/blogphoto1.jpg" alt="blog photo 1">
                    
                    <h1>This is a Single Page Post With a Right Column</h1>
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    
                    <h2>This is an H2 Header and Some Lists</h2>
                    
                    <ol>
                        <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium </li>
                        <li>Doloremque laudantium, totam rem aperiam, 
                            <ul>
                                <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium </li>
                                <li>Doloremque laudantium, totam rem aperiam, </li>
                                <li>Laque ipsa quae ab illo inventore</li>
                                <li>Veritatis et quasi architecto beatae vitae dicta sunt explicabo</li>
                            </ul>
                        </li>
                        <li>Laque ipsa quae ab illo inventore</li>
                        <li>Veritatis et quasi architecto beatae vitae dicta sunt explicabo</li>
                        <li>Nemo enim ipsam voluptatem quia voluptas sit aspernatur</li>
                        <li>Aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem </li>
                    </ol>
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    
                    <h3>This is an H3 Header And a Quote</h3>
                    
                    <blockquote>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
                    </blockquote>
                    
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non </p>

                    <div class="postedin"><h5>Posted In:</h5><a href="#">The Wedding</a><a href="#">The Party</a></div>

                
                    <div class="comments">
                        <h4>Feel Free To Comment Using The Form Below:</h4>

                        <div id="disqus_thread"></div>
                        <script type="text/javascript">
                            /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
                            var disqus_shortname = 'disqus-username'; // required: replace example with your forum shortname

                            /* * * DON'T EDIT BELOW THIS LINE * * */
                            (function() {
                                var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                                dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                            })();
                        </script>
                        <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
                        <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
                    </div>
                </div><!-- /.post-content-->

            </div><!-- /.row -->
              
        </div> <!-- /.container --> 

        <div class="clearfix"></div>

    </section><!-- /.rightcolumn -->




     <!-- =========================================================================================================
    ==============================================================================================================
                                            "Contact Us" form
    ==============================================================================================================
    ============================================================================================================== -->

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Send Us a Message</h4>
                </div>
                
                <!-- the actual form begins -->
                <form id="contactus" method="post" action="send_mail.php" role="form">

                    <div class="modal-body">
                        
                        <p>Have any question of message for us? We'll always try to get back to you as soon as possible. Please use the form below and we'll receive your message in our inbox, only for us to see</p>

                        <!-- NAME -->
                        <div class="form-group">
                            <label for="contactname">Name</label>
                            <input type="text" class="form-control" id="contactname" name="contactname" placeholder="Your Name">
                        </div>

                        <!-- EMAIL -->
                        <div class="form-group">
                            <label for="contactemail">Email address</label>
                            <input type="email" class="form-control" id="contactemail" name="contactemail" placeholder="Your Email">
                        </div>

                        <!-- MESSAGE -->
                        <div class="form-group">
                            <label for="contactmessage">Your Message</label>
                            <textarea class="form-control" rows="3" placeholder="Please Enter Your Message" id="contactmessage" name="contactmessage"></textarea>
                        </div>
                       
                    </div><!-- /.modal-body -->
                    
                    <div class="modal-footer" id='cf_submit_m'>

                        <!-- SUBMIT BUTTON -->
                        <input type="submit" value="Send Message" id="send_contact_message" class="btn btn-primary">
                    </div><!-- /.modal-footer -->

                        <!-- SUCCESS/ERROR FIELDS -->
                    <div id='contact_success' class='alert alert-success'>Thank you. Your message has been sent.</div><!-- /. SUCCESS MESSAGE -->
                    <div id='contact_fail' class='alert alert-danger'> Sorry, don't know what happened. Try later.</div><!-- /. ERROR MESSAGE -->
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

<footer>
    <div class="container">
        <p>&copy; 2014 Sharon &amp; Michael</p>
        
    </div>
</footer>
      

        <!-- INCLUDE jQUERY -->
        <script src="js/vendor/jquery-1.10.1.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

        <!-- DETECT the device type (mobile/desktop) -->
        <script type="text/javascript" src="js/vendor/device.min.js"></script>

        <!-- INCLUDE jQuery waypoints plugin -->
        <script src="js/vendor/waypoints.min.js"></script>

        <!-- INCLUDE flexslider SCRIPT -->
        <script defer src="js/vendor/jquery.flexslider.js"></script>

        <!-- Optional FlexSlider Additions -->
        <script src="js/vendor/jquery.easing.js"></script>
        <script src="js/vendor/jquery.mousewheel.js"></script>

        <!-- INCLUDE bootstrap SCRIPT -->
        <script src="js/vendor/bootstrap.min.js"></script>

        <!-- INCLUDE bootstrap dropdown-on-hover plugin -->
        <script src="js/vendor/bootstrap-hover-dropdown.min.js"></script>

        <!-- INCLUDE parallax plugin -->
        <script src="js/vendor/jquery.parallax.min.js"></script>

        <!-- MEGAFOLIO PRO GALLERY JS FILES -->
        <script type="text/javascript" src="megafolio/js/jquery.themepunch.plugins.min.js"></script>
        <script type="text/javascript" src="megafolio/js/jquery.themepunch.megafoliopro.js"></script>

        <!-- FANCYBOX JS FILES -->
        <script type="text/javascript" src="megafolio/fancybox/jquery.fancybox.pack.js?v=2.1.3"></script>
        <!-- Optionally add helpers - button, thumbnail and/or media ONLY FOR ADVANCED USAGE-->
        <script type="text/javascript" src="megafolio/fancybox/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
        
        <!-- INCLUDE other plugins and scripts AUTHOR MADE -->
        
        <script src="js/vendor/jquery.queryloader2.js"></script>

        <!-- INCLUDE other plugins and scripts AUTHOR MADE -->
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'disqus-username'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function () {
            var s = document.createElement('script'); s.async = true;
            s.type = 'text/javascript';
            s.src = '//' + disqus_shortname + '.disqus.com/count.js';
            (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
        }());
        </script>
    </body>
</html>
